import React, {Component} from 'react';

import M18_1 from './lib/M18_1.mp4';
import M18_2 from './lib/M18_2.mp4';
import M18_3 from './lib/M18_3.mp4';

require('./css/frame.css');

const vdsrc = [M18_1, M18_2, M18_3];

const Info =(i)=> {
  if( i===0) {
    return (
      <div id='box17info'>
        <span style={{fontWeight: 'bold'}}>打开角度编程功能</span>
        <br></br>行李箱盖的打开角度可根据个人需求来设定。通过电动或手动的方式打开行李箱盖至所需的限位位置，然后按下的行李箱盖关闭键
        E406，并保持三秒钟以上。行李箱盖的当前位置即被存储为上部限位位置。成功存储后，汽车会以一次报警闪烁或一个信号音予以确认。当行李箱盖的打开角度在 0°- 20° 范围内时，不允许对其进行编程。
      </div>
    )
  }
  if( i===1) {
    return (
      <div id='box17info'>
        <span style={{fontWeight: 'bold'}}>应急运行功能</span><br></br>主轴驱动装置的霍尔传感器失灵时，无法再电动控制行李箱盖。此时，略微用力即可手动开关行李箱盖。
      </div>)
  }
    if( i===2) {
      return (
        <div id='box17info'>
          <span style={{fontWeight: 'bold'}}>防夹保护功能</span><br></br>出于安全原因的考虑，车辆安装了防夹保护装置。</div>
      )
    }

};
export default class P17 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: 0,
    };
  }

  onClick(i) {
    this.setState({
      index: i
    });
  }

  render() {
    let {index} = this.state;
    const InfoDiv=Info[index];
    return (
      <div id="page">
        <div className="content" id="box17">
          <h4 className="title">舒适系统-电动尾门</h4>
          <div className='infodiv'>电动尾门具备3个功能，请分别点击模块，查看详细介绍。</div>

          <div className={index===0 ?'box17btn_on':'box17btn'}
               onClick={this.onClick.bind(this, 0)} style={{top: 150}}>打开角度编程功能</div>
          <div className={index===1 ?'box17btn_on':'box17btn'}
               onClick={this.onClick.bind(this, 1)} style={{top: 250}}>应急运行功能</div>
          <div className={index===2 ?'box17btn_on':'box17btn'}
               onClick={this.onClick.bind(this, 2)} style={{top: 350}}>防夹保护功能</div>

          <div id="box17vd">
            <video src={vdsrc[index]} controls width='500'></video>
          </div>

          {/*<p id='box17info'>
            < InfoDiv />
          </p>*/}

          {Info(index)}


        </div>
      </div>
    );
  }
}


